import { useState, useRef } from "react";
import { Input } from "antd";
// 指定类型
import type { InputRef } from "antd";
/**
 * 受控组件-非受控组件：
 *
 * 受控组件一般是指表单元素，表单的数据由React的 State 管理，更新数据时，需要手动调用setState()方法，更新数据。
 * 优点：
 * 受控组件可以确保表单数据与组件状态同步、便于集中管理和验证数据，同时提供灵活的事件处理机制以实现数据格式化和UI联动效果。
 *
 * 非受控组件指的是该表单元素不受React的State管理，表单的数据由DOM管理。通过useRef()来获取表单元素的值。
 * defaultValue设置默认值
 *
 * file,非受控
 * 对于file类型的表单控件，它是一个特殊的组件，因为它的值只能由用户通过文件选择操作来设置，而不能通过程序直接设置
 *
 */
export default function InputComDemo() {
  const [inputValue, setInputValue] = useState("");
  //   const setInputValue = (e: React.ChangeEvent<HTMLInputElement>) => {
  //     setInputValue(e.target.value);
  //   }

  // 非受控，通过ref获取
  const inputRef = useRef<InputRef>(null);
  const changeInputValue = () => {
    // antd取值
    console.log(inputRef.current?.input?.value);
  };

  // file--只能非受控
  const changeFile = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.files);
  };

  return (
    <div>
      <h2>受控组件和非受控组件</h2>
      <Input
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      ></Input>

      <hr />
      <Input
        ref={inputRef}
        defaultValue={"非受控组件"}
        onChange={changeInputValue}
      ></Input>

      <hr />
      <div>file====》》</div>
      <Input type="file" onChange={changeFile} />
    </div>
  );
}
